<script>
export default {
  name: "ListView",
  data() {
    return {

      contentArr: [
        {
          "id": 27,
          "title": "家常面包",
          "imgUrl": "/imgs/a.jpg",
          "categoryName": "面包",
          "nickName": "汤姆",
          "userImgUrl": "/imgs/head.jpg"
        },
        {
          "id": 18,
          "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
          "imgUrl": "/imgs/b.jpg",
          "categoryName": "家常菜",
          "nickName": "汤姆",
          "userImgUrl": "/imgs/head.jpg"
        },
        {
          "id": 17,
          "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
          "imgUrl": "/imgs/c.jpg",
          "categoryName": "小食",
          "nickName": "汤姆",
          "userImgUrl": "/imgs/head.jpg"
        },
        {
          "id": 16,
          "title": "蔓越莓绿豆糕，味道还不错值得一试!",
          "imgUrl": "/imgs/d.jpg",
          "categoryName": "面包",
          "nickName": "汤姆",
          "userImgUrl": "/imgs/head.jpg"
        },
      ]
    }
  }
}
</script>

<template>
  <div style="width:1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in contentArr" style="margin: 10px 0">
        <el-card>
          <img :src="item.imgUrl" width="100%" height="145">
          <p style="height: 40px">{{item.title}}</p>
          <el-row>
            <el-col :span="4">
              <el-avatar :src="item.userImgUrl" size="small"></el-avatar>
            </el-col>
            <el-col :span="10">
              {{item.nickName}}
            </el-col>
            <el-col :span="10">
              <span style="float: right">{{item.categoryName}}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<style scoped>

</style>